<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
                xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>市级事项管理</title>


    <!-- JS -->
    <script type="text/javascript" th:src="@{/myconfig/bootstrap/js/jquery.js}" src="myconfig/bootstrap/js/jquery.js"></script>
    <script type="text/javascript" th:src="@{/myconfig/bootstrap/js/bootstrap.min.js}" src="myconfig/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" th:src="@{/myconfig/layui/layui.js}" src="myconfig/layui/layui.js"></script>



    <!-- CSS -->
    <link th:href="@{/myconfig/bootstrap/css/bootstrap.min.css}" href="myconfig/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="all">
    <link th:href="@{/myconfig/layui/css/layui.css}" href="myconfig/layui/css/layui.css" type="text/css" rel="stylesheet" media="all">
</head>
<body>
<div id="dataBody" style="width: 100%; height: 100%">


<!-- 模态框（Modal） -->
<!-- 添加 事项 -->
<div class="modal fade" id="addItemModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" >
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="myModalLabel">
                    事项添加
                </h3>
            </div>
            <div class="modal-body">
                <form id="addItemForm">
                    <div style="height: 100%;width: 100%">
                        <div>
                            事项标题：
                            <input class="form-control" type="text" name="itemTitle" onchange="searchType()">
                        </div>
                        <div style="width:100%;height: 20%;">
                            <div style="width:30%;height:90%;float:left;">
                                事项类型：
                                <select class="form-control" id="itemItemType">
                                    <option value="">--请选择--</option>
                                </select>
                            </div>
                            <div style="width:30%;height:90%;float:left;margin-left:5%">
                                紧急程度：
                                <select class="form-control" id="itemUrgency">
                                    <option value="">--请选择--</option>
                                </select>
                            </div>
                            <div style="width:30%;height:90%;float: left;margin-left:5%">
                                地区：
                                <select class="form-control" id="itemArea">
                                    <option value="">--请选择--</option>
                                </select>
                            </div>
                        </div>
                        <div style="width: 100%;height:10%;">
                            事项内容：
                            <textarea id="itemContent" class="form-control" rows="7%" cols="100%"></textarea>
                        </div>
                        <div style="width: 100%;height:10%;">
                            备注：
                            <textarea id="itemRemark" class="form-control" rows="3%" cols="100%"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="addItem()">添加</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

    <!-- 修改 事项 -->
    <div class="modal fade" id="changeItemModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" >
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="change">
                        事项修改
                    </h3>
                </div>
                <div class="modal-body">
                    <form id="changeItemForm">
                        <input type="text" id="changeItemId" style="display: none">
                        <div style="height: 100%;width: 100%">
                            <div>
                                事项标题：
                                <input class="form-control" type="text" id="changeItemTitle">
                            </div>
                            <div style="width:100%;height: 20%;">
                                <div style="width:100%;height:90%;">
                                    紧急程度：
                                    <select class="form-control" id="changeItemUrgency"></select>
                                </div>
                                <div style="width: 100%;height:10%;">
                                    事项内容：
                                    <textarea id="changeItemContent" class="form-control" rows="7%" cols="100%"></textarea>
                                </div>
                                <div style="width: 100%;height:10%;">
                                    备注：
                                    <textarea id="changeItemRemark" class="form-control" rows="3%" cols="100%"></textarea>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" onclick="closeChangeItemModal()">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="changeItemCommit()">提交修改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!-- 审批事项 -->
    <div class="modal fade" id="approveItemModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" >
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="approve">
                        事项审批
                    </h3>
                </div>
                <div class="modal-body">
                    <form id="approveItemForm">
                        <input type="text" id="approveItemId" style="display:none;">
                        <div style="height: 100%;width: 100%">
                            <div>
                                事项标题：
                                <input class="form-control" type="text" id="approveItemTitle" readonly="readonly">
                            </div>
                            <div style="width:100%;height: 20%;">
                                <div style="width:30%;height:90%;float:left;">
                                    事项类型：
                                    <select class="form-control" id="approveItemType" readonly="readonly"></select>
                                </div>
                                <div style="width:30%;height:90%;float:left;margin-left:5%">
                                    紧急程度：
                                    <select class="form-control" id="approveItemUrgency" readonly="readonly"></select>
                                </div>
                                <div style="width:30%;height:90%;float: left;margin-left:5%">
                                    地区：
                                    <select class="form-control" id="approveItemArea" readonly="readonly"></select>
                                </div>
                            </div>
                            <div style="width: 100%;height:12%;">
                                事项内容：
                                <textarea id="approveItemContent" class="form-control" rows="7%" cols="100%" readonly="readonly"></textarea>
                            </div>
                            <div style="width: 100%;height:10%;">
                                备注：
                                <textarea id="approveItemRemark" class="form-control" rows="3%" cols="100%" readonly="readonly"></textarea>
                            </div>
                            <div style="width: 100%;height:10%;">
                                审批备注：
                                <textarea id="ItemRemarkApprove" class="form-control" rows="2%" cols="100%"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    审批结果:
                    <select id="approveResult" class="form-control" style="width:35%;height: 4%"></select>
                    <button type="button" class="btn btn-default" onclick="closeApproveModal()">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="approveCommit()">提交审批结果</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


<!-- 数据表格 -->
<table class="layui-hide" id="listItems" lay-filter="items"></table>

</div>
<!-- 头部工具栏 -->
<script type="text/html" id="listItemsToolbar">
    <div class="layui-btn-container">
        <button shiro:hasPermission="add_item" class="layui-btn layui-btn-sm layui-btn-normal" data-toggle="modal" data-target="#addItemModal"><span class="layui-icon layui-icon-add-1">&nbsp;添加</span></button>
        <button shiro:hasPermission="delete_item" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="deleteItem"><span class="layui-icon layui-icon-delete">&nbsp;删除</span></button>
        <button shiro:hasPermission="change_item" class="layui-btn layui-btn-sm layui-btn-warm" lay-event="editItem"><span class="layui-icon layui-icon-edit">&nbsp;修改</span></button>
        <button shiro:hasPermission="approval_item" class="layui-btn layui-btn-sm layui-btn-warm" lay-event="approveItem"><span class="layui-icon layui-icon-survey">&nbsp;审批</span></button>
        <button shiro:hasPermission="check_city_task_list" class="layui-btn layui-btn-sm" lay-event="CheckDetails"><span class="layui-icon layui-icon-link">&nbsp;查看子任务</span></button>
    </div>
</script>

<!-- 表格 格式 紧急状况 -->
<script type="text/html" id="urgencyColor">
    {{#  if(d.urgency === '正常'){ }}
        <span><i class="layui-badge-dot layui-bg-green"></i>{{ d.urgency }}</span>
    {{#  } else { }}
        <span><i class="layui-badge-dot layui-bg-red"></i>{{ d.urgency }}</span>
    {{#  } }}
</script>
<!-- 表格 格式 审批状态-->
<script type="text/html" id="stateColor">
    {{#  if(d.state === '审批通过'){ }}
        <span><i class="layui-badge-dot layui-bg-green"></i>{{ d.state }}</span>
    {{#  } else if(d.state === '审批驳回') { }}
        <span><i class="layui-badge-dot layui-bg-red"></i>{{ d.state }}</span>
    {{#  } else{ }}
        <span><i class="layui-badge-dot layui-bg-orange"></i>{{ d.state }}</span>
    {{#  } }}
</script>

<!-- 表格 操作按钮 -->
<script type="text/html" id="fileUploadButton">
    {{#  if(d.state === "等待审批"){ }}
    <a class="layui-btn layui-btn-radius layui-btn-xs layui-btn-normal" lay-event="fileUpload">附件上传</a>
    {{#  } }}
</script>

<script th:inline="none">
        /* 分页查看所有区级事项 */
        layui.use('table', function() {
            var table = layui.table;
            var $ = layui.$;
            $.ajax({
                type: "post",
                url: "itemsManage/listSItems", // 数据接口
                success: function (result) {
                    var data = result.data;
                    table.render({
                        id:'items',
                        elem: '#listItems',
                        title:'区级事项表',
                        toolbar: '#listItemsToolbar',
                        data: data,
                        height: 520,
                        cols: [[
                            {type: 'radio',width: '5%'}
                            , {field: 'sxId', title: 'ID', sort: true, width: '5%', align: 'center'}
                            , {field: 'founder', title: '立项人', width: '10%', align: 'center'}
                            , {field: 'time', title: '立项时间', sort: true, width: '10%', align: 'center'}
                            , {field: 'area', title: '地区', width: '10%', align: 'center'}
                            , {field: 'name', title: '事项标题', width: '10%', align: 'center'}
                            , {field: 'content', title: '事项内容', width: '10%', align: 'center'}
                            , {field: 'state', title: '事项状态', width: '10%', align: 'center', sort: true,templet:'#stateColor'}
                            , {field: 'urgency', title: '紧急程度', width: '10%', align: 'center', sort: true,templet:'#urgencyColor'}
                            , {field: 'remark', title: '备注', width: '10%', align: 'center'},
                            {title: '操作', width: '10%', align: 'center', toolbar: '#fileUploadButton'}
                        ]],
                        page: true, //是否显示分页
                        limits: [5, 10, 15,20], //每页显示个数
                        limit: 10, //每页默认显示的数量
                        group:5   //页码最多显示个数
                    });
                }
            });


            //监听行工具事件
            table.on('tool(items)', function (obj) {
                var data = obj.data.sxId;
                var itemId = JSON.stringify(data);
                layer.open({
                    type: 2 //此处以iframe举例
                    , title: '文件上传'
                    , area: ['600px', '500px']
                    , shade: 0
                    , maxmin: true
                    , content: 'file_item.html?ItemId='+itemId
                    , zIndex: layer.zIndex //重点1
                    , success: function (layero, index) {

                    }
                });
            });



            /* 工具栏监听事件 */
            table.on('toolbar(items)', function(obj){     //items 为table表的ID
                var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
                if(checkStatus.data == ""){
                    layer.msg('请选择一个数据！',{
                        icon:0
                        ,time:500
                    });
                }
                    switch(obj.event){
                        /* 删除一个事项 */
                        case 'deleteItem':
                            if(checkStatus.data != ""){
                                var data = checkStatus.data[0].sxId;  //获取选中行数据中对应的 事项 ID（data为数组，data[0]为下标为0的数据）
                                var sxId = JSON.stringify(data);
                                deleteItemById(sxId);
                            }
                            break;

                        /* 查看一个事项子任务 */
                        case 'CheckDetails':
                            if(checkStatus.data != "") {
                                var sxIdData = checkStatus.data[0].sxId;//获取选中行数据中对应的 事项 ID（data为数组，data[0]为下标为0的数据）
                                var itemStatus = checkStatus.data[0].state;//获取选中行数据中对应的 事项 Status
                                var itemUrengcy = checkStatus.data[0].urgency;//获取选中行数据中对应的 事项 urengcy
                                var itemType = checkStatus.data[0].type;//获取选中行数据中对应的 事项 urengcy
                                var sxId = JSON.stringify(sxIdData);
                                var urengcy = JSON.stringify(itemUrengcy)
                                var type = JSON.stringify(itemType)
                                CheckDetailsById(sxId,urengcy,itemStatus,type);
                            }
                            break;
                        /* 修改事项 */
                        case 'editItem':
                            if(checkStatus.data != "") {
                                var data = checkStatus.data[0].sxId;  //获取选中行数据中对应的 事项 ID（data为数组，data[0]为下标为0的数据）
                                var status = checkStatus.data[0].state;
                                var sxId = JSON.stringify(data);
                                if(status == "等待审批"){
                                    changItem(sxId);
                                }else {
                                    layer.msg("该事项已处理，无法进行修改！");
                                }
                            }
                            break;
                        /* 审批事项 */
                        case 'approveItem':
                            if(checkStatus.data != "") {
                                var data = checkStatus.data[0].sxId;  //获取选中行数据中对应的 事项 ID（data为数组，data[0]为下标为0的数据）
                                var status = checkStatus.data[0].state;
                                var sxId = JSON.stringify(data);
                                if(status == "等待审批"  || status == "等待上级审批"){
                                    itemApprove(sxId);
                                }else {
                                    layer.msg("该事项已处理，无需再次审批！");
                                }
                            }
                            break;
                    };
            });


        });
</script>


<script>
/* 添加一个事项 */
    function addItem() {
        var itemTitle = $("input[name='itemTitle']").val();
        var itemItemType = $("#itemItemType").val();
        var itemUrgency = $("#itemUrgency").val();
        var itemArea = $("#itemArea").val();
        var itemContent = $("#itemContent").val();
        var itemRemark = $("#itemRemark").val();
        if(itemTitle == "") {
            layer.msg("事项标题不能为空!");
        }else if(itemItemType == " "){
            layer.msg("事项类型不能为空！");
        }else if(itemUrgency == " "){
            layer.msg("事项紧急情况不能为空！");
        }else if(itemArea == " ") {
            layer.msg("地区不能为空！");
        }else if(itemContent == ""){
            layer.msg("事项内容不能为空！");
        }else if(itemRemark == ""){
            layer.msg("事项备注不能为空！");
        }else{
            $.ajax({
                url:"itemsManage/addItem",
                type:"post",
                data:{
                    "itemTitle":itemTitle,
                    "itemItemType":itemItemType,
                    "itemUrgency":itemUrgency,
                    "itemArea":itemArea,
                    "itemContent":itemContent,
                    "itemRemark":itemRemark
                },
                success:function (result) {
                    if(result == "success"){
                        if(itemUrgency == 2){
                            layer.msg("事项添加成功！并成功创建事项专报！",{
                                time:500,
                                end:function () {
                                    document.getElementById("addItemForm").reset();
                                    $("#addItemModal").modal("hide");
                                    location.reload();
                                }
                            });
                        }else {
                            layer.msg("事项添加成功！",{
                                time:500,
                                end:function () {
                                    document.getElementById("addItemForm").reset();
                                    $("#addItemModal").modal("hide");
                                    location.reload();
                                }
                            });
                        }
                    }else if(result == "areaError"){
                        layer.msg("不能添加非本地区的事项！");
                    }else {
                        layer.msg("事项添加失败！");
                    }
                }
            });
        }
    }


/* 删除一个事项 */
    function deleteItemById(ItemId) {
        layui.use('table',function () {
            var $ = layui.$;
            $.ajax({
                url:"itemsManage/deleteItem",
                type:"post",
                data:{
                  "sxId":ItemId
                },
                success:function (result) {
                    if (result == "success") {
                        layer.msg("删除事项成功!",{
                            time:500,
                            end:function (){
                                location.reload();
                            }
                        });
                    }else if(result == "hasTask"){
                        layer.msg("该事项尚有子任务未完成，无法删除！");
                    }else {
                        layer.msg("删除事项失败！");
                    }
                }
            });
        })
    }

    /* 查看一个事项子任务 */
    function CheckDetailsById(ItemId,itemUrengcy,itemStatus,type) {
        if(itemStatus!="审批通过"){
            layer.msg("该事项未通过审批");
        }else{
            location.href="item_task_index.html?itemId="+ItemId+"&itemUrengcy="+itemUrengcy+"&type="+type;
        }
    }


    /* 查看所有(地区、事项类型、紧急情况) 分类 */
    function searchType() {
        $.ajax({
           url:"itemsManage/searchAllType",
           type:"post",
           success:function (result) {
               var areaContent ="<option value=' ' selected>--请选择--</option>";
               var urgencyContent ="<option value=' ' selected>--请选择--</option>";
               var typeContent ="<option value=' ' selected>--请选择--</option>";
               var arrayArea = result.area;
               var arrayUrengcy = result.urengcy;
               var arrayType = result.itemType;

               areaContent+="<option value='"+arrayArea.areaId+"'>"+arrayArea.areaName+"</option>"

               for (var i = 0; i < arrayUrengcy.length; i++) {
                   urgencyContent+="<option value='"+arrayUrengcy[i].urgenryId+"'>"+arrayUrengcy[i].urgenryName+"</option>"
               }
               for (var i = 0; i < arrayType.length; i++) {
                   if(arrayType[i].itemTypeName == "区级事项"){
                       continue;
                   }
                   typeContent+="<option value='"+arrayType[i].itemTypeId+"'>"+arrayType[i].itemTypeName+"</option>"
               }
               $("#itemArea").html(areaContent);
               $("#itemItemType").html(typeContent);
               $("#itemUrgency").html(urgencyContent);
           }
        });
    }


/* 修改 事项 */
    /* 关闭修改模态框 并 清空数据 */
    function closeChangeItemModal() {
        document.getElementById("changeItemForm").reset();
        $("#changeItemModal").modal("hide");
    }
    function changItem(sxId) {
        $("#changeItemModal").modal("show");
        searchItemById(sxId);
        searchItemUrgency(sxId);
    }
    function searchItemById(sxId) {
        $.ajax({
            url:"itemsManage/searchItemById",
            type:"post",
            data:{
                "ItemId":sxId
            },
            success:function (result) {
                $("#changeItemTitle").val(result.name);
                $("#changeItemContent").html(result.content);
                $("#changeItemRemark").html(result.remark);
                $("#changeItemId").val(result.sxId);
            }
        });
    }
    function searchItemUrgency(sxId) {
        $.ajax({
            url: "ItemUrgency/listUrgency",
            type: "post",
            data: {
                "itemId":sxId
            },
            success: function (result) {
                var urgency = result.urgency;
                var item = result.item;
                var content ="";
                for (var i = 0; i < urgency.length; i++) {
                    if(urgency[i].urgenryName == item.urgency){
                        content += "<option value='"+urgency[i].urgenryId+"' selected>"+urgency[i].urgenryName+"</option>";
                    }else {
                        content += "<option value='"+urgency[i].urgenryId+"'>"+urgency[i].urgenryName+"</option>";
                    }
                }
                    $("#changeItemUrgency").html(content);
            }
        });
    }
    //提交修改
    function changeItemCommit() {
        var changeItemTitle = $("#changeItemTitle").val();
        var changeItemUrgency = $("#changeItemUrgency").val();
        var changeItemContent = $("#changeItemContent").val();
        var changeItemRemark = $("#changeItemRemark").val();
        var changeItemId = $("#changeItemId").val();
       $.ajax({
           url:"itemsManage/updateItemById",
           type:"post",
           data:{
               "itemId":changeItemId,
               "editItemTitle":changeItemTitle,
               "editItemContent":changeItemContent,
               "editItemRemark":changeItemRemark,
               "editItemUrgency":changeItemUrgency
           },
           success:function (result) {
                if(result == "success"){
                    layer.msg("事项修改成功！",{
                       time:500,
                       end:function () {
                           closeChangeItemModal();
                           location.reload();
                       }
                    });
                }else {
                    layer.msg("事项修改失败！");
                }
           }
       });
    }




/* 事项审批 */
    /* 关闭审批模态框 并 情况数据 */
    function closeApproveModal() {
        document.getElementById("approveItemForm").reset();
        $("#approveItemModal").modal("hide");
    }
    function itemApprove(itemId) {
        $("#approveItemModal").modal("show");
        searchApproItemById(itemId);
        searchApproveResult();
    }
    /* 查询需要审批事项的详情 */
    function searchApproItemById(sxId) {
        $.ajax({
            url:"itemsManage/searchItemById",
            type:"post",
            data:{
                "ItemId":sxId
            },
            success:function (result) {
                $("#approveItemTitle").val(result.name);
                $("#approveItemContent").html(result.content);
                $("#approveItemRemark").html(result.remark);
                $("#approveItemId").val(result.sxId);
                $("#approveItemArea").html("<option>"+result.area+"</option>");
                $("#approveItemType").html("<option>"+result.type+"</option>");
                $("#approveItemUrgency").html("<option>"+result.urgency+"</option>");
            }
        });
    }
    /* 查询所有的审批结果 */
    function searchApproveResult() {
        $.ajax({
            url:"ItemStatusManage/searchAllResult",
            type:"post",
            success:function (result) {
                var content = "<option value=''>--请选择审批结果--</option>";
                for (var i = 0; i < result.length; i++) {
                    if(result[i].statusName == "等待审批" || result[i].statusName == "等待上级审批"){
                        continue;
                    }else {
                        content += "<option value='"+result[i].checkStatusId+"'>"+result[i].statusName+"</option>";
                    }
                }
                $("#approveResult").html(content);
            }
        });
    }
    /* 审批结果 提交 */
    function approveCommit() {
        var approveItemId = $("#approveItemId").val();
        var approveItemResult = $("#approveResult").val();
        var approveItemRemark = $("#approveItemRemark").val();
        if(approveItemRemark == ""){
            approveItemRemark = "无！";
        }
        if(approveItemResult == ""){
            layer.msg("请选择一个审批结果！");
        }else {
            $.ajax({
                url:"ItemApproveManage/ItemApproveCommit",
                type:"post",
                data:{
                    "itemId":approveItemId,
                    "approvalResult":approveItemResult,
                    "approvalRemark":approveItemRemark
                },
                success:function (result) {
                    if(result == "success"){
                        layer.msg("审批结果提交成功！",{
                            time:500,
                            end:function () {
                                closeApproveModal();
                                location.reload();
                            }
                        });
                    }else {
                        layer.msg("审批结果提交失败！")
                    }
                }
            });
        }
    }
</script>



</body>
</html>